<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>矿池详情界面</title>
    <link rel="icon" href="../img/icon.png">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/index.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/details.css">
</head>
<body>
<!--顶部导航条-->
<div class="nav_bg">
    <div class="container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand title_font" href="../index.html">
                <img src="../img/logo.png" alt="" width="300px">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav nav_light">
                    <li class="nav-item">
                        <a class="nav-link" href="../index.html">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="../html/main_shop.html">购买矿机</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="../html/help.html">帮助中心</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>
<!--顶部导航条结束-->


<!--中间内容开始-->
<div class="container" style="margin-top: 40px">
    <div class="info">
        <div>
            <img src="../img/1.jpg" alt="" width="400px">
        </div>
        <input class="info_src" type="text" value="0x352218ccbc1dc933cede3061c85" disabled={true}>
        <button class="copy">复制</button>
    </div>
    <div class="tab">
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true"><img
                        src="../img/details/data.png" alt="">数据</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false"><img
                        src="../img/details/play.png" alt="">付款记录</a>
            </div>
        </nav>
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                <div class="tab-content_content">
                    <div class="container">
                        <div class="chart_title">算力图表</div>
                        <canvas id="myChart" width="auto" height="auto"></canvas>
                        <div style="margin: 1em auto 1em auto;">
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" align="center">
                                    <thead>
                                    <tr>
                                        <th>过去24小时收益</th>
                                        <th>总收益</th>
                                        <th>已支付</th>
                                        <th>账户余额</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td>0.040743726326416355 ETH</td>
                                        <td>26.243261190623279168 ETH</td>
                                        <td>26.191711598871078981 ETH</td>
                                        <td>0.051549591752200187 ETH</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div style="margin: 1em auto 1em auto;">
                            <div class="table-responsive">
                                <table id="workers" class="table table-bordered table-striped table-hover" align="center">
                                    <thead>
                                    <tr>
                                        <th>矿工</th>
                                        <th>15分钟均速</th>
                                        <th colspan="2">1小时均速和过期拒绝率</th>
                                        <th colspan="2">24小时均速和过期拒绝率</th>
                                        <th>最近提交时间</th>
                                    </tr>
                                    <tr>
                                        <th>汇总</th>
                                        <th>448.585 Mhash/s</th>
                                        <th>559.539 Mhash/s</th>
                                        <th>1.3%</th>
                                        <th>521.162 Mhash/s</th>
                                        <th>2.0%</th>
                                        <th>(2 / 3)</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    <tr data-name="test" data-toggle="modal" data-target="#modal-hashrate">
                                        <td >test</td>
                                        <td>0.000 Mhash/s</td>
                                        <td>0.000 Mhash/s</td>
                                        <td></td>
                                        <td>0.298 Mhash/s &nbsp;<img
                                                src="../img/details/icon-line-chart.png"
                                                style="width: 20px;"/></td>
                                        <td>0.0%</td>
                                        <td><span
                                                style="color: #ff0000; font-weight: bold;">2018-03-13 16:45</span>
                                            <span style="color: #ff0000;">(21时26分前)</span></td>
                                    </tr>

                                    <tr data-name="3af47a" data-toggle="modal" data-target="#modal-hashrate">
                                        <td>3af47a</td>
                                        <td>209.976 Mhash/s</td>
                                        <td>312.578 Mhash/s</td>
                                        <td>1.9%</td>
                                        <td>299.405 Mhash/s &nbsp;<img
                                                src="../img/details/icon-line-chart.png"
                                                style="width: 20px;"/></td>
                                        <td>2.2%</td>
                                        <td>
                                            2018-03-14 16:15
                                        </td>
                                    </tr>

                                    <tr data-name="pminer" data-toggle="modal" data-target="#modal-hashrate">
                                        <td>pminer</td>
                                        <td>238.609 Mhash/s</td>
                                        <td>246.961 Mhash/s</td>
                                        <td>0.5%</td>
                                        <td>221.459 Mhash/s &nbsp;<img
                                                src="../img/details/icon-line-chart.png"
                                                style="width: 20px;"/></td>
                                        <td>1.7%</td>
                                        <td>
                                            2018-03-14 16:15
                                        </td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div style="color: #666666;font-size: 14px;margin-bottom: 40px">
                            矿工名须由数字或小写字母组成，最长15个字符。挖矿代理的邮箱设置应为 F2Pool 用户名或注册邮箱。邮件宕机通知尚未开通。
                        </div>


                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                <div class="tab-content_content">
                   <div class="container">
                       <div>
                           <div class="chart_play">
                               付款记录
                           </div>
                           <table class="table table-bordered table-striped" align="center">
                               <thead>
                               <tr>
                                   <th>时间</th>
                                   <th>交易</th>
                                   <th>金额</th>
                               </tr>
                               </thead>
                               <tbody>
                               <td>2018-03-13 08:00</td>
                               <td>0x352218ccbc1dc933cede3061c85ef6b98f8fa30c5b07020a4cf5d51c2d35de3b</td>
                               <td>0.103390566429063329 ETH</td>
                               </tbody>
                               <tbody>
                               <td>2018-03-13 08:00</td>
                               <td>0x352218ccbc1dc933cede3061c85ef6b98f8fa30c5b07020a4cf5d51c2d35de3b</td>
                               <td>0.103390566429063329 ETH</td>
                               </tbody>
                               <tbody>
                               <td>2018-03-13 08:00</td>
                               <td>0x352218ccbc1dc933cede3061c85ef6b98f8fa30c5b07020a4cf5d51c2d35de3b</td>
                               <td>0.103390566429063329 ETH</td>
                               </tbody>
                           </table>
                       </div>
                   </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!--中间内容结束-->

<!--底部内容开始-->
<div style="width: 100%;background: #e4e4e7;padding-top: 28px">
    <div class="container">
        <div class="footer_top">
            <ul>
                <li class="footer_top_title">服务</li>
                <li><a href="">常见问题</a></li>
                <li><a href="">区块链浏览器</a></li>
            </ul>
            <ul>
                <li class="footer_top_title">注意事项</li>
                <li><a href="">ETH挖矿机入门教程</a></li>
                <li><a href="">如何查看自己的收益</a></li>
                <li><a href="">如何设置掉线、转账提醒</a></li>
            </ul>
            <ul>
                <li class="footer_top_title">服务热线</li>
                <li style="font-size: 24px;color: #6c6c6c">4008-500-700<span class="phone_line">|</span></li>
            </ul>
            <ul>
                <li class="footer_top_img">
                    <img src="../img/weibo.png" alt="">
                    <img src="../img/wecat.png" alt="">
                    <img src="../img/headset.png" alt="">
                </li>
                <li><a href="">Kefu@swzh.com</a></li>
            </ul>
            <div>
                <img src="../img/code.jpg" alt="">
                <p style="font-size: 16px;color: #6c6c6c;text-align: center;margin-top: 8px">扫一扫
                    关注我们</p>
            </div>
        </div>
    </div>
</div>
<div style="width: 100%; background: #48474a">
    <div class="container">
        <div class="footer_bottom">
            <div style="border: 1px solid #fff;border-radius: 12px;width: 12px;height: 12px;text-align: center;line-height: 9px">c</div>
            <span>&nbsp 2018 &nbsp iobox &nbsp All &nbsp rights &nbsp reserved &nbsp 成都嗒嗒嗒信息技术有限公司</span>
            <img src="../img/polic_.png" alt="">
            <span style="margin-left: 10px">蜀ICP备16018741号-2</span>
            <img src="../img/qytb1_hui.png" alt="">
            <img src="../img/qytb2_hui.png" alt="">
            <img src="../img/qytb3_hui.png" alt="">
        </div>
    </div>
</div>
<!--底部内容结束-->

<script>
    $(document).ready(function() {
        // 绘制折线图。
        var ctx = document.getElementById("myChart").getContext('2d');
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
                datasets: [{
                    label: '算力折线图',
                    data: [12, 19, 3, 5, 2, 3,5,5,7,5,6,4,5,5,4,11,2,3,11,55,6,3],
                    borderColor: [
                        'rgba(255,99,132,1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    fill:false,
                    borderWidth: 1,
                    pointRadius:3,//设置点的半尽
                    pointHoverRadius:3,//hover 时点的钣金
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }
            }
        });

//        //复制地址
//        var targetText = $(".info_src").val();
//        console.log(targetText)
//        var clipboard = new Clipboard('.copy');
//        clipboard.on('success', function (e) {
//            e.clearSelection();
//            alert('复制成功')
//        });
    })

</script>
</body>
</html>